@extends('layout')
@section('content')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i>
        当前位置: <span class="c-gray en">&gt;</span>
        游戏管理 <span class="c-gray en">&gt;</span>
    <a style="color:blue;" href="{{ url('nonPublicVersion/game') }}" >游戏列表</a> <span class="c-gray en">&gt;</span>
        新增游戏
    </nav>
    <article class="page-container" id="app">
        <form action="{{ url('nonPublicVersion/game') }}" method="post" enctype="multipart/form-data"
              class="form form-horizontal"
              id="form-member-add">
            {{ csrf_field() }}
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">*</span>游戏名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <el-select v-model="value8" filterable placeholder="请选择" style="width: 100%">
                    <el-option
                    v-for="item in options"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                    </el-select>
                    <input type="hidden" name="game_id" id="game_id" value="" v-model="value8">

                    {{--<input type="text" class="input-text" value="" placeholder="" id="name" name="name">--}}
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>手机平台：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <span class="select-box">
                        <select class="select" size="1" name="platform" id="platform">
                            <option value="" selected>--请选择--</option>
                            <option value="1">android</option>
                            <option value="2">ios</option>
                            <option value="3">h5</option>
                        </select>
				    </span>
                    <div>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">原始游戏包：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <div class="formControls col-xs-8 col-sm-2">
                        <div id="uploader3" class="wu-example" style="width: 600px;">
                            <!--用来存放文件信息-->
                            <div id="thelist" class="uploader-list"></div>
                            <div class="btns" style="width: 500px;">
                                <div id="picker">选择文件</div> <div class="btn btn-default start-upload">上传</div>
                                <div style="display:none;" class="btn btn-secondary end-upload download-apk ml-30">查看</div> 
                                <div style="display:none;" class="btn btn-danger end-upload delete-apk">删除</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">备注：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="note" id="note" cols="" rows="" class="textarea" ></textarea>
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                    <input class="btn btn-primary radius" type="submit" id="submit"  value="提交">
                </div>
            </div>
        </form>
    </article>
@endsection
@section('script')
    <script type="application/javascript">

        new Vue({
            el: '#app',
            data: function(){
                return {
                    options: '',
                    value8: '',
                    supplier: '',
                    supplier_id: ''
                }
            },
            methods: {
                loadAll : function ()  {
                    this.getGames('');
                },
                getGames:function (keywords) {
                    var self = this;
                    keywords = keywords ? keywords : '';
                    request('{{ url('/nonPublicVersion/gameConfig/getGames') }}',function (data) {
                        self.options= data;
                    });
                },
            },
            mounted:function() {
                this.loadAll();
            }
        });
        var packagePath = '';
        var error = false;

        $(function () {
            /**************app包上传**********************/
            var uploader3 = WebUploader.create({

                // swf文件路径
                swf: '{{ asset('H_uiv_3.0/lib/webuploader/0.1.5/Uploader.swf') }}',

                // 文件接收服务端。
                server: "{{ url('/nonPublicVersion/uploadchunk') }}",

                chunked: true,//开启分片上传
                chunkSize : 1 * 1024 *1024,  //每个分片的大小
                threads: 1,//上传并发数
                //由于Http的无状态特征，在往服务器发送数据过程传递一个进入当前页面是生成的GUID作为标示
                formData: {guid:"1",_token:"{{csrf_token()}}"},

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: {multiple:false,id:'#picker'},

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false
            });


            // 当文件被加入队列之前触发
            uploader3.on( 'beforeFileQueued', function( file ) {
                uploader3.reset();
                no_upload_file = true;
            });
            // 当有文件被添加进队列的时候
            uploader3.on( 'fileQueued', function( file ) {
                $thelist = $("#thelist");
                $thelist.html( '<div id="' + file.id + '" class="item">' +
                        '<h4 class="info">' + file.name + '</h4>' +
                        '<p class="state">等待上传...</p>' +
                        '</div>' );
            });

            // 文件上传过程中创建进度条实时显示。
            uploader3.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                            '</div>' +
                            '</div>').appendTo( $li ).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css( 'width', percentage * 100 + '%' );
            });

            uploader3.on("uploadAccept", function( file, phpData){
                //console.info(phpData)
                if (phpData.code != '0') { // 通过return false来告诉组件，此文件上传有错。 return false;
                    layer.alert(phpData.msg, {
                        closeBtn: 0,
                        anim: 4 //动画类型
                    });
                    error = true;
                    return false;
                } else {
                    is_file_success = true;
                    error = false;
                    return true;
                }
            });


            uploader3.on( 'uploadError', function( file , response) {
                is_file_success = false;
                $( '#'+file.id ).find('p.state').text('上传出错');
            });

            uploader3.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            uploader3.on( 'uploadSuccess', function( file , response) {
                if (response.data){
                    packagePath = response.data;
                }
                is_file_success = true;
                $('.end-upload').show();
                $( '#'+file.id ).find('p.state').text('已上传');
            });

            $(".start-upload").click(function () {
                uploader3.upload();
            });
            $('.delete-apk').on('click',function(){
            	packagePath = '';
            	$('.state').text(''); 
            	$('.info').text(''); 
            	$('.end-upload').hide();
            });
            $(".download-apk").on('click',function(){
                var url = "{{ url('nonPublicVersion/gamedown') }}"+"?package_path="+packagePath;
                location.href=url;
            });
            $("#form-member-add").submit(function () {
                var url = $(this).attr('action');

                var params = {
                    'game_id': $('#game_id').val(),
                    'suppliers': $('#suppliers').val(),
                    'platform': $('#platform').val(),
                };

                var note = $("#note").val();

                if (note){
                    params.note = note;
                }

                var timer = setInterval(function () {
                    if (!uploader3.isInProgress()){
                        if (packagePath){
                            params.package_path = packagePath;
                        }
                        clearInterval(timer);

                        //如果上传没有失败
                        if (!error){
                            request(url,function (data) {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.$('#btn-refresh').click();
                                parent.layer.close(index);
                            },params,'post');
                        }
                    }
                },100);

                return false;
            });
        })
    </script>
@endsection